<template>
    <div id="main" style="width:100%;height:400px;"></div>

    <div id="main2" style="width:100%;height:400px;"></div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted } from 'vue'
import { kanbanApi } from '@/api'
import * as echarts from 'echarts';
let myEcharts = echarts;
onMounted(() => {

    callKanbanApi()
    initChart2()
})

const callKanbanApi = () => {

    kanbanApi.select.call().then((res: any) => {
        // console.log(res)
        initChart(res)
    })
}
const initChart = (data: any) => {

    var myChart = myEcharts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
        title: {
            text: '库存量'
        },
        tooltip: {
            trigger: 'item',
            formatter: function (v: any) {
                return v.value + '万'

            }
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none',
                    title: {
                        zoom: "区域缩放",
                        back: "区域缩放还原"
                    }
                },
                dataView: { readOnly: false, title: "数据视图" },
                magicType: { type: ['line', 'bar'], title: { line: "切换为折线图", bar: "切换为柱状图" } },
                restore: { title: "还原" },
                saveAsImage: { title: "作为图片保存" }
            }
        },
        legend: {
            // data: ['销量', '库存量', '退货量']
        },
        xAxis: {
            type: "category",
            axisLabel: {
                interval: 0,// 0 强制显示所有，1为隔一个标签显示一个标签，2为隔两个
                rotate: 45,//标签旋转角度，在标签显示不下的时可通过旋转防止重叠
                textStyle: {
                    fontSize: 12,//字体大小
                },
                formatter: (v: any) => {

                    if (v.length > 6) {
                        return v.substring(0, 6) + ".."
                    }
                    return v
                }

            },
            data: Array.from(data, ({ name }) => name)
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: function (v: any) {
                    return v + '万' // 给纵坐标的值统一除以10000 就变成了以万为单位

                }
            },
        },
        series: [
            {
                name: '库存量',
                type: 'line', //bar
                data: Array.from(data, ({ qty }) => qty)
            },
            {
                name: '销量',
                type: 'bar', //bar
                data: Array.from(data, ({ saleCount }) => saleCount)
            }
        ]
    });

    window.addEventListener('resize', function () {
        myChart.resize();
    })
}

const initChart2 = () => {

    var myChart = myEcharts.init(document.getElementById('main2'));
    // 绘制图表
    myChart.setOption({
        title: {
            text: '库存量'
        },
        tooltip: {
            trigger: 'item',
            formatter: function (v: any) {
                return v.value + '万'

            }
        },
        toolbox: {

        },
        legend: {
            // data: ['销量', '库存量', '退货量']
        },

        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true
                },
                data: [
                    { value: 1048, name: 'TRANCE' },
                    { value: 735, name: 'WARN' },
                    { value: 580, name: 'INFO' },
                    { value: 484, name: 'DEBUG' },
                    { value: 300, name: 'ERROR' }
                ]
            }
        ]
    });
}
onUnmounted(() => {
    myEcharts.dispose
})
</script> 